
import { useEffect, useCallback } from 'react';
import { connect } from 'react-redux';
import { Layout, message } from 'antd'
import { EllipsisOutlined} from '@ant-design/icons'


import MessageContent from '../messageContent';
import ChatFooter from '../chatFooter';

import {
    room_wrapper_right,
    room_right_header,
    room_right_header_name,
    room_right_header_set,
    room_right_main,
    room_right_footer,
    room_none_show
} from '../../pages/room/index.module.css'
import { getGroupInfo } from '../../assets/js/api'
import { changeCurrentRoomInfo } from '../../store/actions'
import { publish } from 'pubsub-js';
import { showGroupInfo } from '../../event-type';

const {Header, Content, Footer} = Layout;


function ChatContent(props) {

    const { currentRoom, currentRoomInfo, changeCurrentRoomInfo } = props;

    // const [loading, setLoading] = useState(false);
    const getRoomInfo = useCallback(() => {
        // 获取房间的信息
        return new Promise((resolve, reject) => {
            getGroupInfo({group_id: currentRoom})
            .then(res => {
                const {code, message:content, data} = res.data;
                if (code !== 1) {
                    message.error({content});
                    reject(content);
                    return;
                }
                resolve(data);
            })
            .catch(err => {
                console.log(err);
                message.error({content: err});
                reject(err);
            })
        });
    }, [currentRoom]);

    useEffect(() => {
        if (currentRoom !== -1) {
            // setLoading(true);
            
            Promise.all([getRoomInfo()])
            .then(data => {
                changeCurrentRoomInfo(data[0]);
                // setLoading(false);
            })
            .catch(err => {
                console.error(err);
                message.error({content: '错误'});
            });
        }
    }, [currentRoom,changeCurrentRoomInfo,getRoomInfo]);

    
    function openInfoModal() {
        // 打开群组信息
        publish(showGroupInfo, currentRoomInfo);
    }

    return (
        <Layout className={room_wrapper_right}>
            <Header className={room_right_header}>
                <span className={room_right_header_name}>{currentRoomInfo.group_name}</span>
                {
                    // 无房间显示和系统消息时,不显示设置按钮
                    currentRoom !== -1 && currentRoom !== 0 ? 
                        <span className={room_right_header_set} onClick={openInfoModal}><EllipsisOutlined /></span>:
                        ''
                }
            </Header>
            {
                currentRoom !== -1 ? 
                    <>
                        <Content className={room_right_main}>
                            <MessageContent />
                        </Content>
                        <Footer className={room_right_footer}>
                            <ChatFooter />
                        </Footer>
                    </> :
                    <div className={room_none_show}>
                        这是没点击房间时显示,放一个logo在这
                    </div>
            }
        </Layout>
    )
}



function mapStateToProps(state) {
    return {
        currentRoom: state.currentRoom,
        currentRoomInfo: state.currentRoomInfo
    }
}
export default connect(
    mapStateToProps,
    {
        changeCurrentRoomInfo,
    }
)(ChatContent);
